<head>
<script type="text/javascript">
function loadData() {
  document.getElementById("metric").innerHTML = 
    "<br>"+$("#q_name").value+
    "<br>"+$("#q_host").value+
    "<br>"+$("#q_start").value+
    "<br>"+$("#q_end").value;
}
</script>
</head>

<body>

<div>
<h1> Otus Metrics Query v0.1 </h1>
</div>

<form id='query_form'>
Metric: <input type="text" id="q_name" name="name"/>
Host: <input type="text" id="q_host" name="host"/>
Start Time: <input type="text" id="q_start" name="start_time"/>
End Time: <input type="text" id="q_end" name="end_time"/>
<input name="submit" type="submit" value="Submit"/>
</form>

<div id="metric">
    <div id="metricName">Metric</div> <div id="dataPoint">Hello</div>
    <div id="labels">
        <div id="time">
        </div>
        <div id="dateRange"></div>
    </div>
</div>
<br/>
</body>
